<template>
  <div class="">
    <div class="breadcrumb flex-center">
      <p class="title">我的关注</p>
    </div>
    <div class="box">
      <div
        class="flex-center mgb-20 relative item"
        v-for="(i, index) in tableDate"
        :key="index"
      >
        <el-image class="cover" :src="i.img" fit="cover"></el-image>
        <div class="pdl-10 pdr-20 pdt-9 pdb-9 flex1">
          <div>
            <div class="flex-between">
              <p class="flex flex-column mgb-10">
                <span class="bold">{{i.name}}</span>
                <span class="f12 line1">{{i.organisation}}</span>
              </p>
              <div class="btn" v-if="i.state">取消关注</div>
              <div class="btn focus" v-if="!i.state">关注</div>
            </div>
          </div>
          <div class="flex" style="flex-wrap: wrap">
            <i
              class="tag mgb-5"
              v-if="i.tag != ''"
              :key="tagIndex"
              v-for="(tag, tagIndex) in i.tag.split(',')"
              >{{ tag }}</i
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableDate: [
        {
          img: require("../../assets/img/图层 10 拷贝@2x.png"),
          name: "李焦",
          sex: "女",
          organisation: "成都市泡桐树小学",
          tag: "名师认证,红色教育授课金奖,成都市优秀班主任",
          date: "2021-03-10",
          state: true,
        },
        {
          img: require("../../assets/img/图层 10 拷贝@2x.png"),
          name: "李焦",
          sex: "女",
          organisation: "成都市泡桐树小学",
          tag: "名师认证,红色教育授课金奖,成都市优秀班主任",
          date: "2021-03-10",
          state: false,
        },
        {
          img: require("../../assets/img/图层 10 拷贝@2x.png"),
          name: "李焦",
          sex: "女",
          organisation: "成都市泡桐树小学",
          tag: "名师认证,红色教育授课金奖,成都市优秀班主任",
          date: "2021-03-10",
          state: true,
        },
        {
          img: require("../../assets/img/图层 10 拷贝@2x.png"),
          name: "李焦",
          sex: "女",
          organisation: "成都市泡桐树小学",
          tag: "名师认证,红色教育授课金奖,成都市优秀班主任",
          date: "2021-03-10",
          state: false,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
@import "../../assets/css/variable.less";
.cover {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.box {
  box-shadow: 1px 2px 33px 5px rgba(204, 204, 204, 0.12);
  border-radius: 7px 7px 7px 7px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  .cover {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
  }
  .item {
    width: 50%;
    padding: 0 30px;
    box-sizing: border-box;
    .btn{
      background-color: @color-red;
      opacity: 0.5;
      border-radius: 4px;
      padding: 0 10px;
      font-size: 12px;
      color: #fff;
      box-sizing: border-box;
      line-height: 28px;
      height: 28px;
      &.focus{
       opacity: 1;
      }
    }
  }
}
</style>